import { Card, Form, Input, Button, Space } from "antd";
import { useNavigate } from "react-router-dom";
export default function Login(){
    const [form] = Form.useForm()
    const navigate = useNavigate()
    const handleReset = ()=>{
        form.resetFields()
    }
    const handleLogin = async (values: { username: string; password: string })=>{
        console.log(values)
        try {
            await form.validateFields()
            // 验证成功，跳转到首页
            navigate('/')
        } catch (error) {
            // 验证失败，不跳转
            console.log('表单验证失败:', error)
        }
    }
    return(
        <>
            <Card style={{width:400,margin:'0 auto',marginTop:200}}>
                <Form layout="vertical" form={form} onFinish={handleLogin}>
                    <Form.Item label="用户名" name="username" rules={[{required: true, message: "请输入用户名"}]}>
                        <Input placeholder="请输入用户名"/>
                    </Form.Item>
                    <Form.Item label="密码" name="password" rules={[{required: true, message: "请输入密码"}]}>
                        <Input placeholder="请输入密码"/>
                    </Form.Item>
                    <Form.Item>
                        <Space>
                            <Button type="primary" htmlType="submit">登录</Button>
                            <Button onClick={handleReset} htmlType="submit">重置</Button>
                        </Space>
                    </Form.Item>
                </Form>
            </Card>
        
        </>
    )
}